<template>
  <ex-dialog
    width="800px"
    class="ex-diolog"
    title="基础信息"
    :visible="visible"
    @closeDialog="handleClose"
  >	
		<el-form  :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm ">
			<el-form-item label="卡封面：" prop="individuationCardCover">
        <el-upload
          class="avatar-uploader"
          :action="action"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img
            v-if="ruleForm.individuationCardCover"
            :src="ruleForm.individuationCardCover"
            class="cover_img"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <span style="color: #1890ff">建议尺寸上传宽333px高149px的图片</span>
      </el-form-item>
      <el-form-item label="卡名称：" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入卡名称" disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="温馨提示：">
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="ruleForm.assetIntroduce"
          show-word-limit
          :autosize="{ minRows: 4}"
        >
        </el-input>
      </el-form-item>
      
			<el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
				<el-button @click="handleClose('ruleForm')">取消</el-button>
			</el-form-item>
		</el-form>
  </ex-dialog>
</template>
<script>
// components
import Loading from '@/components/Loading/index'
// api
import { editCard} from "@/api/bridgeCard";


export default {
  components: {
    Loading
  },
  props: {
    visible: Boolean,
    cardData: Object,
    pathType: String,
  },
  data() {
    return {
      action: process.env.VUE_APP_BASE_API + "/common/v1/uploadFile",
			ruleForm: {
        individuationCardCover: '',
				assetIntroduce: '',
				name: '',
			},
			rules: {
          account: [
            { required: true,message: '请选择店铺', trigger: 'change' }
          ],
          name: [
            { required: true,message: '请选择预付卡', trigger: 'change' }
          ],
        }
    }
  },
  computed: {
   
  },
  created() {
    this.ruleForm.individuationCardCover = this.cardData.individuationCardCover
    this.ruleForm.assetIntroduce = this.cardData.assetIntroduce
    this.ruleForm.name = this.cardData.name
	},
  methods: {
    //卡封面
    handleAvatarSuccess(res, file) {
      this.ruleForm.individuationCardCover = res.result.url;
    },
    //上传照片前
    beforeAvatarUpload(file) {
      console.log(file);
      const format = ["image/jpeg", "image/jpg", "image/png"];
      const isJPG = format.some((item) => file.type === item);
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 jpeg,jpg,png格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 10MB!");
      }
      return isJPG && isLt2M;
    },
    //详情
    getDetail(){
      var data = {
        id: this.id
      }
			associationDetail(data).then(res => {
        const {result} = res
        console.log('platformDetail',result)
        this.ruleForm.account = result.account
        this.ruleForm.name = result.name
       
      }).finally(() => {
        this.loading = false
      })
    },
    
    //新建子账号
    submitForm(formName) {
      console.log('formName',formName)
      this.$refs[formName].validate((valid) => {
        console.log('valid',valid)
        if (valid) {
          console.log('this.cardData.assetIntroduce',this.cardData.individuationCardCover)
          let Base64 = require("js-base64").Base64;
          var assetIntroduce = Base64.encode(this.ruleForm.assetIntroduce)
          var data = {
            name: this.ruleForm.name,
            assetIntroduce:assetIntroduce,
            individuationCardCover: this.ruleForm.individuationCardCover,
            assetId: this.cardData.assetId,
          }
          editCard(data).then(res => {
            this.handleSuccess("修改成功")
          }).finally(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    
		//取消
    handleClose(formName) {
      this.$emit('update:visible', false)
			// this.$refs[formName].resetFields();
    },
		//确认
		handleConfirm(){
			this.$emit('success', '你好')
		},
    handleSuccess(msg) {
      if (msg === '已拒绝') {
        var type = 'error'
      } else {
        var type = 'success'
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1500,
        onClose: () => {
          this.handleClose()
          this.$emit('success')
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
		padding: 0 !important;
  }
	::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }
  
}
.cover_img {
  width: 208px;
  height: 128px;
}
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  width: 208px !important;
  height: 128px !important;
}
.avatar-uploader .el-upload {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 208px;
  height: 128px;
  line-height: 128px;
  text-align: center;
}
.el-input{
    width: 310px !important; 
  }
</style>
